<template>
  <div class="mainor">
    <el-form
      :inline="true"
      :model="monitorForm"
      class="demo-form-inline"
      ref="userListFrom"
      label-width="70px"
    >
      <div class="main_spac1 paddingBottom5">
        <div class="main_white padding10 paddingBottom0">
          <div class="main_crumbs boxdq">
            <div class="main_crumbs_l">
              <a href="javascript:;" @click="$router.back(-1)">
                <i class="el-icon-arrow-down"></i>返回
              </a>
              <em>|</em>
              <span>批发订单</span>
            </div>
            <div class="main_crumbs_r boxnr">
              <el-button @click="handleAllUseAdvice">批量使用建议</el-button>
            </div>
          </div>
          <!-- 搜索 -->
          <div class="marginTop15">
            <el-form-item label="配送日期" prop="form.send_time">
              <el-date-picker
                v-model="monitorForm.form.send_time"
                type="date"
                :editable="false"
                :clearable="false"
                class="time240"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="商品" prop="">
              <change-goods-input
                ref="changeGoodsInput"
                @clear="
                  () => {
                    this.monitorForm.form.goods_spu_id = '';
                  }
                "
                @sendValue="
                  (data) => {
                    this.monitorForm.form.goods_spu_id = data.id;
                  }
                "
              ></change-goods-input>
            </el-form-item>
            <el-form-item label="下单优先" prop="form.order_priority">
              <el-select
                v-model.trim="monitorForm.form.order_priority"
                placeholder="单据类型"
                class="wid220"
              >
                <el-option label="所有" value="0"></el-option>
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="reset marginLeft10" @click="reset"
                >重置</el-button
              >
              <el-button type="primary" @click="search" :loading="listLoading"
                >搜索</el-button
              >
            </el-form-item>
            <div style="float: right"></div>
          </div>
          <!-- 商品分类 -->
          <div class="category_box">
            <div class="level1">
              <span class="title">主分类：</span>
              <ul>
                <li
                  :class="category_first_id ? '' : 'selected'"
                  @click="selectCategory_all(1)"
                >
                  全部
                </li>
                <li
                  :class="item.id == category_first_id ? 'selected' : ''"
                  v-for="item in categoryList"
                  :key="item.id"
                  @click="selectCategory(item, 1)"
                >
                  {{ item.title }}
                </li>
              </ul>
            </div>
            <div class="level2">
              <span class="title">次分类：</span>
              <ul>
                <li
                  :class="category_second_id ? '' : 'selected'"
                  @click="selectCategory_all(2)"
                >
                  全部
                </li>
                <li
                  v-for="item in categoryList_second"
                  :key="item.id"
                  :class="item.id == category_second_id ? 'selected' : ''"
                  @click="selectCategory(item, 2)"
                >
                  {{ item.title }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="main_white main_container">
          <div class="main_left_box">
            <div class="main_table">
              <el-table
                ref="multipleTable"
                :data="monitorForm.list"
                v-loading="listLoading"
                element-loading-text="加载中"
                border
                highlight-current-row
                :header-cell-class-name="this.$verticaline"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" :selectable="selectInit" />
                <el-table-column
                  label="商品图片"
                  prop=""
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <div class="demo-image__error mainor_im">
                      <el-image
                        fit="fill"
                        :src="scope.row.pic"
                        :preview-src-list="scope.row.pics"
                      >
                        <div slot="error" class="image-slot">
                          <img :src="puzzleImg" />
                        </div>
                      </el-image>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="商品名称"
                  prop="name"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    {{ scope.row.goods ? scope.row.goods.name : "" }}【{{
                      scope.row.spu_name ? scope.row.spu_name.title : ""
                    }}】
                  </template>
                </el-table-column>
                <el-table-column
                  label="单位"
                  prop=""
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    {{ scope.row.spu_unit ? scope.row.spu_unit.title : "" }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="描述"
                  prop="describe"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="互调比"
                  prop="package_num"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="单价"
                  prop="market_price"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="起订量"
                  prop="minimum"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label=" "
                  prop=""
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    {{ scope.row.inventory ? scope.row.inventory.num : "" }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="批发数量"
                  prop=""
                  :render-header="renderHeader_purchase"
                  width="250"
                >
                  <template slot-scope="scope">
                    <el-input-number
                      v-model="scope.row.cart_num"
                      @change="(val) => handleChange(val, scope)"
                      @blur="cartnumBlur(scope)"
                      :min="scope.row.minimum_copy"
                      label="描述文字"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column label=" " prop="">
                  <template slot-scope="scope">
                    <div v-if="scope.row.advise == 1">
                      <el-dropdown>
                        <span
                          class="el-dropdown-link"
                          @click="handleUseAdvice(scope)"
                        >
                          使用建议<i
                            class="el-icon-arrow-down el-icon--right"
                          ></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item
                            >下单单位：{{
                              scope.row.own_transfer_unit
                            }}</el-dropdown-item
                          >
                          <el-dropdown-item
                            >下单数量：{{
                              scope.row.own_transfer_num
                            }}</el-dropdown-item
                          >
                          <el-dropdown-item
                            >实时库存：{{
                              scope.row.own_transfer_package_num
                            }}</el-dropdown-item
                          >
                          <el-dropdown-item
                            >互调比：{{
                              scope.row.package_num
                            }}</el-dropdown-item
                          >
                          <el-dropdown-item
                            >换算比
                            <el-tooltip
                              class="item"
                              effect="dark"
                              placement="top"
                            >
                              <div slot="content">
                                注释：基础SKU互调比/批发SKU互调比
                              </div>
                              <svg
                                aria-hidden="true"
                                class="navbar_svg new_navbar_svg"
                                width="14"
                                height="14"
                              >
                                <use xlink:href="#icon-summary_question" />
                              </svg> </el-tooltip
                            >：{{ scope.row.own_transfer_package_num }}/{{
                              scope.row.package_num
                            }}</el-dropdown-item
                          >
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="main_page boxdq">
              <div></div>
              <!-- 分页 -->
              <div class="main_page_r">
                <el-pagination
                  :current-page="current.page"
                  :page-sizes="[10, 20, 30, 50]"
                  :page-size="limit"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount"
                  background
                  @size-change="changeLimit"
                  @current-change="changePage"
                />
              </div>
            </div>
          </div>
          <div class="main_right_box" @click="go_shopcar">
            <div>
              <span class="title">购物车</span>
              <el-popover
                placement="left"
                title="购物车"
                width="100"
                trigger="hover"
              >
                <div>
                  <p>品种数量：{{ monitorForm.cart_data.count }}</p>
                  <p>批发数量：{{ monitorForm.cart_data.num }}</p>
                  <p>批发金额：{{ monitorForm.cart_data.money }}</p>
                </div>
                <span class="number" slot="reference">{{
                  monitorForm.cart_data.num
                }}</span>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  bulk_order_list,
  bulk_order_addCart,
  bulk_order_batchaddCart,
} from "@/api/bulk/index";
import { puzzleImg } from "@/api/currency";
import { parseTime } from "@/utils/index";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import changeGoodsInput from "@/views/bulk/components/changeGoodsInput";
export default {
  components: {
    changeGoodsInput,
  },
  computed: {
    ...mapGetters(["avatar"]),
  },
  data() {
    return {
      puzzleImg,
      parseTime,
      // 列表数据
      monitorForm: {
        form: {
          send_time: parseTime(new Date(), "{y}-{m}-{d}"),
          order_priority: "", //下单优先
          goods_spu_id: "",
          category_id: "",
          pid: "",
        },
        list: [],
        cart_data: {
          num: 0,
        },
      },
      listLoading: false,
      isclick: true,
      // 分页
      current: {
        page: 1,
        per_page: 10,
      },
      limit: 10,
      totalCount: 1,
      // 商品分类
      categoryList: [],
      categoryList_second: [],
      category_first_id: null,
      category_second_id: null,
      selectArr: [],
    };
  },
  created() {
    this.bulk_order_list();
  },
  methods: {
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr = val;
    },
    // 订单差额 ？注释
    renderHeader_purchase(h, { column, $index }) {
      return h("div", [
        h("span", {
          domProps: {
            innerHTML: column.label,
          },
        }),
        h(
          "el-tooltip",
          {
            attrs: {
              effect: "dark",
              content: "注释：基础SKU数量/批发SKU互调比=建议批发数量",
              placement: "top",
            },
          },
          [
            h("i", {
              style: "margin-left: 5px;margin-top:-1px;",
              class: "el-icon-question table-msg",
            }),
          ]
        ),
      ]);
    },
    // 监听绑定全选不可勾选
    selectInit(row, index) {
      if (row.advise == 1) {
        return true;
      } else {
        return false;
      }
    },
    // 列表数据
    bulk_order_list() {
      this.listLoading = true;
      let list_form = this.monitorForm.form;
      list_form.pid = this.category_first_id;
      list_form.category_id = this.category_second_id;
      let data = Object.assign(
        apiUrl().name,
        list_form,
        this.current
      );
      bulk_order_list(data).then((res) => {
        if (res.errcode == 0) {
          res.data.list.map((e) => {
            if (e.cart_num > 0) {
              e.minimum_copy = e.minimum;
            } else {
              e.minimum_copy = 0;
            }
            if (e.goods.images.length > 0) {
              e.goods.images.map((a) => {
                a.path = this.avatar.domain + "/" + a.path;
                if (a.main == 1) {
                  e.pic = a.path;
                }
              });
              e.pics = e.goods.images.map((s) => s.path);
            } else {
              e.pic = "";
              e.pics = [];
            }
          });
          this.monitorForm.list = res.data.list;
          this.monitorForm.cart_data = res.data.cart_data;
          this.totalCount = res.data.count;

          // 分类处理
          this.categoryList = res.data.categoryList;
          this.listLoading = false;
        }
      });
    },
    // 重置
    reset() {
      this.monitorForm.form = {
        send_time: parseTime(new Date(), "{y}-{m}-{d}"),
        order_priority: "", //下单优先
        goods_spu_id: "",
        category_id: "",
      };
      this.$refs["changeGoodsInput"].name = "";
      this.category_first_id = "";
      this.category_second_id = "";
      this.bulk_order_list();
    },
    // 搜索
    search() {
      this.bulk_order_list();
    },
    // 批量使用建议
    handleAllUseAdvice() {
      let length = this.selectArr.length;
      this.$confirm(
        `标题：已选中【${length}】个商品，确定批量使用建议，使用后下单商品将不会出现在计划采购列表？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        if (length == 0) {
          this.$message.warning("请选择数据");
        } else {
          let list = [];
          this.selectArr.map((e) => {
            let obj = {
              goods_spu_id: e.id,
              goods_id: e.goods_id,
              num: e.own_transfer_num,
              oids: e.oids,
            };
            list.push(obj);
          });
          let form = {
            list: JSON.stringify(list),
          };
          this.bulk_order_batchaddCart(form);
        }
      });
    },
    // 使用建议
    handleUseAdvice(scope) {
      this.$confirm(
        "标题：确定使用建议，使用后下单商品将不会出现在计划采购列表？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        let form = {
          goods_spu_id: scope.row.id,
          goods_id: scope.row.goods_id,
          num: scope.row.own_transfer_num,
          oids: scope.row.oids,
        };
        this.bulk_order_addCart(form);
      });
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.bulk_order_list();
    },
    changePage(page) {
      this.current.page = page;
      this.bulk_order_list();
    },
    // 批发数量添加
    handleChange(val, scope) {
      if (this.isclick) {
        this.isclick = false;
        setTimeout(() => {
          this.isclick = true;
          let form = {
            goods_spu_id: scope.row.id,
            goods_id: scope.row.goods_id,
            num: scope.row.cart_num,
          };
          this.bulk_order_addCart(form);
        }, 500);
      }
    },
    cartnumBlur(scope) {
      this.handleChange(scope);
    },
    // 批量使用建议
    bulk_order_batchaddCart(form) {
      let data = Object.assign(
        apiUrl().name,
        form
      );
      bulk_order_batchaddCart(data).then((res) => {
        if (res.errcode == 0) {
          this.monitorForm.cart_data = res.data.cart_data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 添加到购物车
    bulk_order_addCart(form) {
      let data = Object.assign(
        apiUrl().name,
        form
      );
      bulk_order_addCart(data).then((res) => {
        if (res.errcode == 0) {
          this.monitorForm.cart_data = res.data.cart_data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 路由跳转
    go_shopcar() {
      this.$router.push({
        name: "bulk_shopcart",
        params: { send_time: this.monitorForm.form.send_time },
      });
    },
    //分离选择
    selectCategory_all(type) {
      if (type == 1) {
        this.categoryList_second = [];
        this.category_first_id = "";
        this.category_second_id = "";
        this.bulk_order_list();
      } else if (type == 2) {
        this.category_second_id = "";
        this.bulk_order_list();
      }
    },
    selectCategory(item, type) {
      if (type == 1) {
        this.categoryList_second = item.selfNext;
        this.category_first_id = item.id;
        this.category_second_id = "";
        this.bulk_order_list();
      } else if (type == 2) {
        this.category_second_id = item.id;
        this.bulk_order_list();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bulk_num_box {
  display: flex;
  align-items: center;
  .el-input {
    margin: 0 8px;
  }
}

// 商品分类
.category_box {
  font-size: 14px;
  .level1,
  .level2 {
    padding: 18px 45px 18px 4px;
    display: flex;
    align-items: center;
    .title {
      color: #03a98e;
    }
    ul {
      flex: 1;
    }
    li,
    ul {
      display: inline;
    }
    li {
      margin: 0 15px;
      color: #333333;
      cursor: pointer;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
        Microsoft YaHei, Arial, sans-serif;
    }
    .selected {
      color: #03a98e;
      border-bottom: 1px solid #03a98e;
    }
  }
  .level1 {
    width: 100%;
    border-bottom: 1px solid #e3e3e5;
  }
}

.main_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  .main_left_box {
    padding: 0 10px;
    width: calc(100% - 39px);
    .main_table {
      margin-top: 0;
    }
  }
  .main_right_box {
    width: 39px;
    background-color: #03a98e;
    margin-top: -53px;
    display: flex;
    justify-content: center;
    align-items: center;
    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .title {
      writing-mode: vertical-lr;
      color: #fff;
      cursor: pointer;
    }
    .number {
      writing-mode: horizontal-tb;
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-left: 5px;
      margin-top: 10px;
      text-align: center;
      line-height: 20px;
      background-color: #e6a23c;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }
  }
}
.main_table /deep/.el-table--small td .cell {
  height: 50px;
  line-height: 50px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>